<template>
  <el-select
    v-model="localValue"
    @change="handleChange"
    placeholder="请选择"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import { ref, watch, defineComponent } from 'vue'

export default defineComponent({
  name: 'MySelect',
  emits: ['update:modelValue', 'change'],
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    options: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  setup(props, { emit }) {
    const localValue = ref(props.modelValue)

    watch(() => props.modelValue, (newValue) => {
      localValue.value = newValue
    })

    const handleChange = (value) => {
      emit('update:modelValue', value)
      emit('change', value)
    }

    return {
      localValue,
      handleChange
    }
  }
})
</script>

<style scoped>
/* 添加一些样式 */
</style>
